/*
 * @Author: quit
 * @Date: 2023-02-24 10:56:18
 * @LastEditTime: 2023-02-24 18:20:58
 * @Descripttion:
 * @notice:
 */
/**
 * state 是组件内部私有的数据，只能在组件内部使用
 * 它的值是一个对象,可以有多个数据
 * 在state中状态是可变的
 *
 * 在组件中无法直接修改状态内的值,需要使用 setSatte()方法
 * 语法 this.setState({需要修改的值})
 * setState() 的作用 1.修改state 2.更新UI
 */

import React from 'react'

// class useState extends React.Component {
//     constructor() {
//         super()
//         this.state = {
//             count: 0
//         }
//     }
//     render() {
//         return (
//             <div>
//                 <div>当前count值为:{this.state.count}</div>
//             </div>
//         )
//     }
// }

// class useState extends React.Component {
//     state = {
//         count: 0
//     }

//     render() {
//         return (
//             <div>
//                 <div>当前count值为:{this.state.count}</div>
//                 <button
//                     onClick={() => {
//                         this.setState({
//                             count: this.state.count + 1
//                         })
//                     }}
//                 ></button>
//             </div>
//         )
//     }
// }

/**
 * 将逻辑代码抽离
 * 这里的this 会出现 undefined 问题
 * 处理方法
 * 1. <button onClick={() => this.addCount()}></button>  使用箭头函数
 * 2. function.prototype.bind()  使用原型链继承的方式
 * 3. 使用箭头函数式的class实力方法
 * |-- 这是一个实验性的语法,因为纯在babel工具可以使用
 */
class useState extends React.Component {
    // constructor() {
    //     super()
    //     this.addCount = this.addCount.bind(this)
    //     this.state = {
    //         count: 0
    //     }
    // }
    state = {
        count: 0
    }

    addCount = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <div>当前count值为:{this.state.count}</div>
                <button onClick={this.addCount()}>count + 1</button>
            </div>
        )
    }
}

export default useState
